<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title>Set 和 Map 的用法 | liuz2&#39;s Blog</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="generator" content="Hugo 0.63.1" />
    
    
      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    

    
    
      <link href="/dist/css/app.9576afd3b3c158d98f48ec5df01fec6a.css" rel="stylesheet">
    

    

    
      

    

    

    <meta property="og:title" content="Set 和 Map 的用法" />
<meta property="og:description" content="Map 和 Set 是 ES6 新增的类型。本文介绍它俩的基础用法。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://liuz2.gitee.io/posts/map-and-set/" />
<meta property="article:published_time" content="2021-10-08T22:27:45+08:00" />
<meta property="article:modified_time" content="2021-10-08T22:27:45+08:00" />
<meta itemprop="name" content="Set 和 Map 的用法">
<meta itemprop="description" content="Map 和 Set 是 ES6 新增的类型。本文介绍它俩的基础用法。">
<meta itemprop="datePublished" content="2021-10-08T22:27:45&#43;08:00" />
<meta itemprop="dateModified" content="2021-10-08T22:27:45&#43;08:00" />
<meta itemprop="wordCount" content="552">



<meta itemprop="keywords" content="javascript," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Set 和 Map 的用法"/>
<meta name="twitter:description" content="Map 和 Set 是 ES6 新增的类型。本文介绍它俩的基础用法。"/>

	
  </head>

  <body class="ma0 avenir bg-white">

    
   
  

  <header>
    <div class="bg-black">
      <nav class="pv3 ph3 ph4-ns" role="navigation">
  <div class="flex-l justify-between items-center center">
    <a href="/" class="f3 fw2 hover-white no-underline white-90 dib">
      
        liuz2&#39;s Blog
      
    </a>
    <div class="flex-l items-center">
      

      
        <ul class="pl0 mr3">
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/about/" title="About page">
              About
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/links/" title="Links page">
              Links
            </a>
          </li>
          
          <li class="list f5 f4-ns fw4 dib pr3">
            <a class="hover-white no-underline white-90" href="/timeline/" title="Timeline page">
              Timeline
            </a>
          </li>
          
        </ul>
      
      















    </div>
  </div>
</nav>

    </div>
  </header>



    <main class="pb7" role="main">
      
  
  <article class="flex-l flex-wrap justify-between mw8 center ph3">
    <header class="mt4 w-100">
      <h1 class="f3 athelas mt3 mb1">Set 和 Map 的用法</h1>
      
      
      <time class="f6 mv1 dib tracked" datetime="2021-10-08T22:27:45&#43;08:00">October 8, 2021</time>

      
      
    </header>
    <div class="nested-copy-line-height lh-copy sans-serif f5 nested-links nested-img mid-gray pr4-l w-two-thirds-l"><h2 id="set">Set</h2>
<p><code>Set</code> 表示集合，可以存储任意类型的唯一值。多次添加同一个值，只会存储第一个值。</p>
<h3 id="基本操作">基本操作</h3>
<ul>
<li><code>add(val)</code> 增加元素</li>
<li><code>has(val)</code> 判断元素是否存在</li>
<li><code>size</code> 获取集合大小</li>
<li><code>delete(val)</code> 删除元素</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#75715e">// 新建集合
</span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">set</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Set</span>();

<span style="color:#75715e">// 添加元素
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">add</span>(<span style="color:#ae81ff">1</span>);
<span style="color:#75715e">// Set(1) {1}
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">add</span>(<span style="color:#ae81ff">5</span>);
<span style="color:#75715e">// Set(2) {1, 5}
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">add</span>(<span style="color:#ae81ff">5</span>);
<span style="color:#75715e">// Set(2) {1, 5}
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 判断是否包含
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">has</span>(<span style="color:#ae81ff">1</span>);
<span style="color:#75715e">// true
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">has</span>(<span style="color:#ae81ff">3</span>);
<span style="color:#75715e">// false
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">has</span>(<span style="color:#ae81ff">5</span>);
<span style="color:#75715e">// true
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 获取集合大小
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">size</span>;
<span style="color:#75715e">// 2
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 删除元素
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#66d9ef">delete</span>(<span style="color:#ae81ff">5</span>);
<span style="color:#75715e">// true
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">has</span>(<span style="color:#ae81ff">5</span>);
<span style="color:#75715e">// false
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">size</span>;
<span style="color:#75715e">// 1
</span></code></pre></div><h3 id="遍历集合">遍历集合</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">set</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Set</span>();
<span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#39;a&#39;</span>);
<span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#39;b&#39;</span>);
<span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">add</span>(<span style="color:#e6db74">&#39;c&#39;</span>);

<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">item</span> <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">set</span>) <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">item</span>);
<span style="color:#75715e">// a
</span><span style="color:#75715e"></span><span style="color:#75715e">// b
</span><span style="color:#75715e"></span><span style="color:#75715e">// c
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">item</span> <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">keys</span>()) <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">item</span>);
<span style="color:#75715e">// a
</span><span style="color:#75715e"></span><span style="color:#75715e">// b
</span><span style="color:#75715e"></span><span style="color:#75715e">// c
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">item</span> <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">values</span>()) <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">item</span>);
<span style="color:#75715e">// a
</span><span style="color:#75715e"></span><span style="color:#75715e">// b
</span><span style="color:#75715e"></span><span style="color:#75715e">// c
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> [<span style="color:#a6e22e">key</span>, <span style="color:#a6e22e">value</span>] <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">entries</span>()) <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">key</span>, <span style="color:#a6e22e">value</span>);
<span style="color:#75715e">// a a
</span><span style="color:#75715e"></span><span style="color:#75715e">// b b
</span><span style="color:#75715e"></span><span style="color:#75715e">// c c
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 把集合转换为数组
</span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> Array.<span style="color:#a6e22e">from</span>(<span style="color:#a6e22e">set</span>);
<span style="color:#a6e22e">arr</span>
<span style="color:#75715e">// [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 把数组转换为集合
</span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">set2</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Set</span>([<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">2</span>, <span style="color:#ae81ff">3</span>, <span style="color:#ae81ff">4</span>]);
<span style="color:#a6e22e">set2</span>
<span style="color:#75715e">// Set(4) {1, 2, 3, 4}
</span><span style="color:#75715e"></span>[...<span style="color:#a6e22e">set2</span>]
<span style="color:#75715e">// [1, 2, 3, 4]
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 交集
</span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">intersection</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Set</span>([...<span style="color:#a6e22e">set1</span>].<span style="color:#a6e22e">filter</span>(<span style="color:#a6e22e">x</span> =&gt; <span style="color:#a6e22e">set2</span>.<span style="color:#a6e22e">has</span>(<span style="color:#a6e22e">x</span>)));

<span style="color:#75715e">// 差集
</span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">difference</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Set</span>([...<span style="color:#a6e22e">set1</span>].<span style="color:#a6e22e">filter</span>(<span style="color:#a6e22e">x</span> =&gt; <span style="color:#f92672">!</span><span style="color:#a6e22e">set2</span>.<span style="color:#a6e22e">has</span>(<span style="color:#a6e22e">x</span>)));

<span style="color:#75715e">// 通过 forEach 遍历
</span><span style="color:#75715e"></span><span style="color:#a6e22e">set</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#a6e22e">item</span> =&gt; <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">item</span>));
<span style="color:#75715e">// a
</span><span style="color:#75715e"></span><span style="color:#75715e">// b
</span><span style="color:#75715e"></span><span style="color:#75715e">// c
</span></code></pre></div><h3 id="数组去重">数组去重</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">numbers</span> <span style="color:#f92672">=</span> [<span style="color:#ae81ff">2</span>, <span style="color:#ae81ff">3</span>, <span style="color:#ae81ff">4</span>, <span style="color:#ae81ff">4</span>, <span style="color:#ae81ff">2</span>, <span style="color:#ae81ff">3</span>, <span style="color:#ae81ff">3</span>, <span style="color:#ae81ff">4</span>, <span style="color:#ae81ff">4</span>, <span style="color:#ae81ff">5</span>, <span style="color:#ae81ff">5</span>, <span style="color:#ae81ff">6</span>, <span style="color:#ae81ff">6</span>, <span style="color:#ae81ff">7</span>, <span style="color:#ae81ff">5</span>, <span style="color:#ae81ff">32</span>, <span style="color:#ae81ff">3</span>, <span style="color:#ae81ff">4</span>, <span style="color:#ae81ff">5</span>];
[...<span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Set</span>(<span style="color:#a6e22e">numbers</span>)];
<span style="color:#75715e">// [2, 3, 4, 5, 6, 7, 32]
</span></code></pre></div><h2 id="map">Map</h2>
<p><code>Map</code> 是一种映射，它的键值可以是任意类型，包括引用类型。普通的 <code>Object</code> 只能用 <code>String</code> 或 <code>Symbol</code> 做键值。</p>
<h3 id="基本操作-1">基本操作</h3>
<ul>
<li><code>set(key, val)</code> 设置元素</li>
<li><code>get(key)</code> 获取元素</li>
<li><code>size</code> 获取映射大小</li>
<li><code>delete(key)</code> 删除某个元素</li>
<li><code>clear()</code> 清除所有元素</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">map</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Map</span>();

<span style="color:#75715e">// 设置元素
</span><span style="color:#75715e"></span><span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;a&#39;</span>, <span style="color:#ae81ff">1</span>);
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;b&#39;</span>, <span style="color:#ae81ff">2</span>);
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;c&#39;</span>, <span style="color:#ae81ff">3</span>);
<span style="color:#75715e">// Map(3) {&#39;a&#39; =&gt; 1, &#39;b&#39;=&gt; 2, &#39;c&#39;=&gt; 3}
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 获取元素
</span><span style="color:#75715e"></span><span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#39;a&#39;</span>);
<span style="color:#75715e">// 1
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 获取大小
</span><span style="color:#75715e"></span><span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">size</span>;
<span style="color:#75715e">// 3
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 删除元素
</span><span style="color:#75715e"></span><span style="color:#a6e22e">map</span>.<span style="color:#66d9ef">delete</span>(<span style="color:#e6db74">&#39;b&#39;</span>);
<span style="color:#75715e">// true
</span><span style="color:#75715e"></span><span style="color:#a6e22e">map</span>.<span style="color:#66d9ef">delete</span>(<span style="color:#e6db74">&#39;b&#39;</span>);
<span style="color:#75715e">// false
</span><span style="color:#75715e"></span><span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">size</span>;
<span style="color:#75715e">// 2
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 清除所有元素
</span><span style="color:#75715e"></span><span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">clear</span>();
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">size</span>
<span style="color:#75715e">// 0
</span></code></pre></div><h3 id="objects-vs-maps">Objects vs. Maps</h3>
<p><code>Object</code> 和 <code>Map</code> 类似，都可以存储键值对，检索键值，删除键，测试存在性等操作。它们的差别如下：</p>
<table>
<thead>
<tr>
<th></th>
<th>Map</th>
<th>Object</th>
</tr>
</thead>
<tbody>
<tr>
<td>意外的键值</td>
<td><code>Map</code> 默认不包含任何键值</td>
<td><code>Object</code> 有原型对象，可能会自定义属性冲突。</td>
</tr>
<tr>
<td>键的类型</td>
<td>任意类型</td>
<td>只能是 <code>String</code> 或 <code>Symbol</code> 之一</td>
</tr>
<tr>
<td>键的顺序</td>
<td>和插入顺序相同</td>
<td>排序规则复杂，且不统一</td>
</tr>
<tr>
<td>集合大小</td>
<td>通过 <code>size</code> 属性获取</td>
<td>需要手动计算</td>
</tr>
<tr>
<td>遍历方式</td>
<td><code>Map</code> 是 <code>iterable</code>，可以直接使用 <code>for...of</code> 遍历</td>
<td><code>Object</code> 没有实现 iteration 协议，无法直接通过 <code>for...of</code> 遍历</td>
</tr>
<tr>
<td>性能</td>
<td>在频繁增加删除键值时，性能高</td>
<td>没有对频繁插入删除键值做性能优化</td>
</tr>
<tr>
<td>序列化和解析</td>
<td>不支持原生的序列化和解析（但是可以通过手动实现，见下文）</td>
<td>原生支持序列化和解析：<code>JSON.stringify()</code> 和 <code>JSON.parse()</code></td>
</tr>
</tbody>
</table>
<h3 id="序列化和解析">序列化和解析</h3>
<p>JS 原生不支持对 Map 进行序列化和解析：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">map</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Map</span>();
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;a&#39;</span>, <span style="color:#ae81ff">1</span>);
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;b&#39;</span>, <span style="color:#ae81ff">2</span>);
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;c&#39;</span>, <span style="color:#ae81ff">3</span>);

<span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#a6e22e">map</span>)
<span style="color:#75715e">// &#39;{}&#39;
</span></code></pre></div><p>可以使用 <code>JSON.stringify()</code> 的 <code>replacer</code> 参数和 <code>JSON.parse()</code> 的 <code>reviver</code> 参数，手动实现 <code>Map</code> 的序列化和解析。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">map</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Map</span>();
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;a&#39;</span>, <span style="color:#ae81ff">1</span>);
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;b&#39;</span>, <span style="color:#ae81ff">2</span>);

<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">foo</span> <span style="color:#f92672">=</span> { <span style="color:#a6e22e">map</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">map</span> };
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">str</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>(<span style="color:#a6e22e">foo</span>, <span style="color:#a6e22e">replacer</span>);
<span style="color:#a6e22e">str</span>
<span style="color:#75715e">// &#39;{&#34;map&#34;:{&#34;dataType&#34;:&#34;Map&#34;,&#34;value&#34;:[[&#34;a&#34;,1],[&#34;b&#34;,2]]}}&#39;
</span><span style="color:#75715e"></span>
<span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">parse</span>(<span style="color:#a6e22e">str</span>, <span style="color:#a6e22e">reviver</span>);
<span style="color:#75715e">// { map: Map(2) }
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 手动序列化 Map
</span><span style="color:#75715e"></span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">replacer</span>(<span style="color:#a6e22e">key</span>, <span style="color:#a6e22e">value</span>) {
    <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">value</span> <span style="color:#66d9ef">instanceof</span> <span style="color:#a6e22e">Map</span>) {
        <span style="color:#66d9ef">return</span> {
            <span style="color:#a6e22e">dataType</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Map&#39;</span>,
            <span style="color:#a6e22e">value</span><span style="color:#f92672">:</span> Array.<span style="color:#a6e22e">from</span>(<span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">entries</span>())
        }
    }
    
    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">value</span>;
}

<span style="color:#75715e">// 手动恢复 Map
</span><span style="color:#75715e"></span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">reviver</span>(<span style="color:#a6e22e">key</span>, <span style="color:#a6e22e">value</span>) {
    <span style="color:#66d9ef">if</span> (<span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">value</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;object&#39;</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">value</span> <span style="color:#f92672">!==</span> <span style="color:#66d9ef">null</span>) {
        <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">dataType</span> <span style="color:#f92672">===</span> <span style="color:#e6db74">&#39;Map&#39;</span>) {
            <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Map</span>(<span style="color:#a6e22e">value</span>.<span style="color:#a6e22e">value</span>);
        }
    }
    
    <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">value</span>;
}
</code></pre></div><h3 id="遍历">遍历</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">map</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">Map</span>();
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;a&#39;</span>, <span style="color:#e6db74">&#39;One&#39;</span>);
<span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;b&#39;</span>, <span style="color:#e6db74">&#39;Two&#39;</span>);

<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">key</span>, <span style="color:#a6e22e">value</span>] <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">map</span>) {
    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">key</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39; = &#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">value</span>);
}
<span style="color:#75715e">// a = One
</span><span style="color:#75715e"></span><span style="color:#75715e">// b = Two
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">key</span> <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">keys</span>()) {
    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">key</span>)
}
<span style="color:#75715e">// a
</span><span style="color:#75715e"></span><span style="color:#75715e">// b
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">value</span> <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">values</span>()) {
    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">value</span>)
}
<span style="color:#75715e">// One
</span><span style="color:#75715e"></span><span style="color:#75715e">// Two
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">key</span>, <span style="color:#a6e22e">value</span>] <span style="color:#66d9ef">of</span> <span style="color:#a6e22e">map</span>.<span style="color:#a6e22e">entries</span>()) {
    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">key</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#39; = &#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">value</span>);
}
<span style="color:#75715e">// a = One
</span><span style="color:#75715e"></span><span style="color:#75715e">// b = Two
</span></code></pre></div><h2 id="ref">REF</h2>
<ol>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a>, MDN</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a>, MDN</li>
<li><a href="https://stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map">How do you JSON.stringify an ES6 Map?</a>, stackoverflow</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify()</a>, MDN</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">JSON.parse()</a>, MDN</li>
</ol>
<a href="https://gitee.com/liuz2/liuz2/blob/master/content/posts/map-and-set.md#tree_comm_title" class="no-underline db b--black pa2 tc bg-black-90" style="color:#eee;">进入留言</a><ul class="pa0">
  
   <li class="list dib">
     <a href="/tags/javascript" class="link f5 grow no-underline br-pill ba ph3 pv2 mb2 dib black sans-serif">javascript</a>
   </li>
  
</ul>
<div class="mt6 instapaper_ignoref">
      
      
      </div>
    </div>

    <aside class="w-30-l mt6-l">




  <div class="bg-light-gray pa3 nested-list-reset nested-copy-line-height nested-links">
    <p class="f5 b mb3">相关內容</p>
    <ul class="pa0 list">
	   
	     <li  class="mb2">
          <a href="/posts/javascript-variables/">Javascript 的变量、作用域和内存</a>
        </li>
	    
	     <li  class="mb2">
          <a href="/posts/string-replace-explained/">string.replace() 详解</a>
        </li>
	    
	     <li  class="mb2">
          <a href="/posts/change-event-of-input/">关于文本输入框 change 事件触发时机</a>
        </li>
	    
    </ul>
</div>

</aside>

  </article>

    </main>
    <footer class="bg-black bottom-0 w-100 pa3" role="contentinfo">
  <div class="flex justify-between">
  <a class="f4 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="https://liuz2.gitee.io/" >
    &copy;  liuz2's Blog 2022 
  </a>
    <div>














</div>
  </div>
</footer>

    

  <script src="/dist/js/app.3fc0f988d21662902933.js"></script>


  </body>
</html>
